<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ page import="openbang.account.service.entity.MediaObject" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Locale" %>
<%
  //由某一个Servlet传入的参数
  MediaObject mediaObject = (MediaObject) request.getAttribute("mediaObject");
  String businessType = (String) request.getAttribute("businessType");
  
  String blogKey = mediaObject.getBlobKey();
  String title = mediaObject.getTitle();
  String description = mediaObject.getDescription();
  String fileName = mediaObject.getFileName();
  double  fileSize = mediaObject.getSize()*1.0/1000; //单位 KB
  String isPublic = mediaObject.isPublic()?"公开":"不公开";
  String createDate = (new SimpleDateFormat("yyyy-MM-dd HH:mm",Locale.SIMPLIFIED_CHINESE)).format(mediaObject.getCreation());
  String updateDate = (new SimpleDateFormat("yyyy-MM-dd HH:mm",Locale.SIMPLIFIED_CHINESE)).format(mediaObject.getUpdTime());
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="keywords" content="显示图片  编辑图片  文件上传  upload 头像  照片"/>
  <link type="text/css" rel="stylesheet" href="/css/openbang.css"/>  
  <link href="/css/style.css" rel="stylesheet" type="text/css" />
  <title>开源邦  显示图片参数  编辑图片</title>
  <script language="javascript" type=text/javascript src="/js/common.js"></script>
  <script type="text/javascript" language="javascript" src="/cropimg/cropimg.nocache.js"></script>  
  <script language="javascript" type=text/javascript>
     function toViewPhoto(){
    	 document.getElementById("nowSize").value = document.getElementById("imgNowSizeTxt").value;
    	 document.getElementById("cropXY").value = document.getElementById("cropXYTxt").value;
    	 document.getElementById("cropSize").value = document.getElementById("cropSizeTxt").value;
    	 document.getElementById("orgiSize").value = document.getElementById("imgSizeTxt").value;
    	 document.getElementById("myform").submit();
     }
  </script>
</head>
<body>
    <!-- OPTIONAL: include this if you want history support -->
    <iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1' style="position:absolute;width:0;height:0;border:0"></iframe>
    
    <!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
    <noscript>
      <div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
        Your web browser must have JavaScript enabled
        in order for this application to display correctly.
      </div>
    </noscript>

<div class="p_body">

<%@ include file="/head.jsp" %>

<div class="main">

<div class="content">

<div class="content_left_t">
<div class=left_top_t>图片属性</div>
<div>
  
 <div class="cropImgTxt">
 <!-- 提交给后台实现对图片真正的缩放和剪裁 -->
  <form action="/displayPhoto.do" method="POST" id="myform" target="_newPhoto">
    <input type="hidden"  name="businessType" value="<%=businessType%>"/>
    <input type="hidden"  id="mediaObjectId" name="mediaObjectId" value="<%=mediaObject.getId()%>"/> 
    <input type="hidden"  id="orgiSize" name="orgiSize" value=""/>            
    <input type="hidden"  id="nowSize" name="nowSize" value=""/>   
    <input type="hidden"  id="cropXY" name="cropXY" value=""/>            
    <input type="hidden"  id="cropSize" name="cropSize" value=""/>            
  </form>
  <Table  class="cropImgPtxt">
    <input type="hidden"  id="imgUrl" name="imgUrl" value="/displayPhoto.do?outputType=stream&mediaObjectId=<%=mediaObject.getId()%>&blobKey=<%=blogKey%>"/><!-- 图片url --> 
    <TR><TH colspan="2">图片修改属性:</TH></TR>    
    <TR><TD>图片缩放:</TD><TD><button id="resize_small">缩小</button><button id="resize_orgi">还原</button><button id="resize_big">放大</button></TD></TR>
    <TR><TD>缩放后的大小:</TD><TD><input type="text" value="1024*768" id="imgNowSizeTxt" size="10" readonly="readonly"/>像素</TD></TR>
    <TR><TD>裁剪框左上角:</TD><TD><input type="text" value="250,250" id="cropXYTxt" size="10" readonly="readonly"/>坐标</TD></TR>
     <TR><TD colspan="2" align="center"><input type="button" name="view" value="查看效果" onclick="toViewPhoto()"/>&nbsp;注:暂无法保存到数据库</TD></TR>
    <TR><TD colspan="2"><HR></TD></TR>
    <TR><TH colspan="2">图片原有属性:</TH></TR>
    <TR><TD>标题:</TD><TD><%=title%></TD></TR>
    <TR><TD>描述:</TD><TD>测试</TD></TR>
    <TR><TD>是否公开:</TD><TD><%=isPublic%></TD></TR>
    <TR><TD>文件名:</TD><TD><%=fileName%></TD></TR>
    <TR><TD>图片原始大小: </TD><TD><%=fileSize%>KB</TD></TR>
    <TR><TD>上传日期:</TD><TD><%=createDate%></TD></TR>
    <TR><TD>最近修改日期:</TD><TD><%=updateDate%></TD></TR>
    <TR><TD>原始像素大小:</TD><TD><input type="text" value="1024*768" id="imgSizeTxt" size="10" readonly="readonly"/>像素</TD></TR>
    <TR><TD>操作区大小:</TD><TD><input type="text" value="500*500" id="actionSizeTxt" size="10"  readonly="readonly"/>像素</TD></TR>
    <TR><TD>裁剪框大小:</TD><TD><input type="text" value="200*200" id="cropSizeTxt" size="10"  readonly="readonly"/>像素</TD></TR>
    <TR><TD>缩放比例尺:</TD><TD><input type="text" value="5" id="resizeRateTxt" size="10"  readonly="readonly"/>%(百分比)</TD></TR>

  </Table>
 
 </div>

</div>
</div>
<div class="content_centent">
<div class="main_top_cropimg">
<div class="ptop">位置：显示图片</div>

<div id="img_action_div"><!-- 显示图片编辑的区域 -->
</div> 
  <!-- iframe id="viewPhoto" name="viewPhoto" width="90%" height="500" src="/displayPhoto.do?outputType=stream&blobKey=<%=blogKey%>"></iframe -->
  <!--  img id="photo_img" src="/displayPhoto.do?outputType=stream&blobKey=<%=blogKey%>"/-->

</div>


</div>
<div class="content_right1">
<div class="h_5"></div>
</div>

</div>

<div class="baner">
<!-- google 广告 begin-->
<!-- google 广告 end-->
	
</div>

</div>

<%@ include file="/foot.jsp"%>

</div>
</body>
</html>
